<template>
	<div style="height: 100%;">
		<div :class="['navBar', isCollapse ? 'collapsNav' : '']">
			<div>
				<div style="text-align: center;">
					<img v-show="!isCollapse" :src="logoimg" class="logoimg">
					<img v-show="isCollapse" :src="togglelogoimg" class="collaoselogo">
				</div>
				<template v-for="(item,index) in navList" :key="index">
					<el-menu router active-text-color="#ffd04b" background-color="#001529" text-color="#fff"
						:default-active="this.$route.path" class="el-menu-vertical-demo wx_navbar"
						:collapse="isCollapse" @open="handleOpen" @close="handleClose">
						<el-sub-menu v-if="item.havesub" :index="item.path">
							<template #title>
								<el-icon>
									<Icon :name="item.iconClass" />
								</el-icon>
								<span>{{item.navItem}}</span>
							</template>
							<el-menu-item v-for="subitem in item.child" :key="subitem.code"  :index="subitem.path">
								<el-icon>
									<menu />
									<Icon :name="subitem.iconClass" />
								</el-icon>
								{{subitem.navItem}}
							</el-menu-item>
						</el-sub-menu>
						<el-menu-item :index="item.path" v-else>
							<el-icon>
								<Icon :name="item.iconClass" />
							</el-icon>
							<template #title>
								{{item.navItem}}
							</template>
						</el-menu-item>
					</el-menu>
				</template>
			</div>
		</div>
		<div :class="['contentRight', isCollapse ? 'collapscontentRight' : '']" style="height: 100%;">
			<div class="pagehead">
				<div class="wxbreadcumb">
					<Icon name="gengduo" :class="['wxtoggleIcon', isCollapse ? 'collapsed' : '']"
						@click="togglePageStyle" />
					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/home' }">
							<Icon name="shouye" />首页
						</el-breadcrumb-item>
						<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
							<Icon :name="item.meta.iconClass" />
							{{ item.name }}
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="utils">
					<div>
						<Icon name="quanping" @click="togglefullscreen" />
					</div>
					<div>
						<Icon name="lingdang"/><i class="notictips">3</i>
					</div>
					
				</div>

				<div class="userSetting" @mouseover="itemHover" @mouseout="removeHover">
					<img :src="avatar" alt="" style="height: 24px;">
					<i style="vertical-align: super;"></i>
					<Icon name="xiala" />
					<Transition name="userSetItem">
						<div v-show="showUserSet" class="userSettingContent">
							<div class="disrelative">个人信息</div>
							<div>退出登录</div>
						</div>
					</Transition>
				</div>
			</div>
			<div class="routerTag">
				<p style="display: inline-block;">
					<Icon name="zuo" />
				</p>
				<div style="width: 90%;display: inline-block;">
					<el-tag effect="plain" :class="{ 'activeTag': $route.path =='/home' }" hit="false"
						@click="routerHomeTag">
						首页
					</el-tag>
					<el-tag v-for="tag in dynamicTags" :key="tag" effect="plain" hit="false"
						:class="{ 'activeTag': tag.path==$route.path }" @click="routerTag(tag)" closable
						:disable-transitions="true" @close="handleClosetag(tag)">
						<i class="huiyuan"></i>
						{{ tag.name }}
					</el-tag>
				</div>
				<Icon class="closeTags" size="16" color="red" name="guanbi1" @click="closeTags" />
			</div>
			<div class="routerCon">
				<keep-alive>
					<router-view></router-view>
				</keep-alive>
			</div>
		</div>
	</div>

</template>

<script>
	import useRouterStore from "../../store/modules/navRouter.js"; //引入pinia store
	//获取小仓库对象
	let routerStore = useRouterStore();
	export default {
		data() {
			return {
				routerStore: routerStore,
				showUserSet: false,
				collapsed: false,
				isCollapse: false,
				logoimg: new URL('@/assets/images/logo.png', import.meta.url).href,  //项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片
				togglelogoimg: new URL('@/assets/images/togglelogo.jpg', import.meta.url).href,
				avatar: new URL('@/assets/images/avatar.png', import.meta.url).href,
				navList: [{
						code: 1,
						path: '/home',
						navItem: '首页',
						iconClass: 'shouye',
						havesub: false
					},
					{
						code: 2,
						path: '/assembly',
						navItem: '组件',
						iconClass: 'zujian',
						havesub: true,
						child: [{
								code: 201,
								path: '/assembly/iconfont',
								navItem: '图标',
								iconClass: 'ziti',
							},
							{
								code: 202,
								path: '/assembly/font',
								navItem: '字体',
								iconClass: 'wenzi',
							},
							{
								code: 203,
								path: '/assembly/tabs',
								navItem: '选项卡',
								iconClass: 'xuanxiangka',
							},
							{
								code: 204,
								path: '/assembly/table',
								navItem: '表格',
								iconClass: 'biaoge1',
							},
							{
								code: 205,
								path: '/assembly/checked',
								navItem: '单选/多选',
								iconClass: 'biaoge1',
							}
						]
					},
					{
						code: 3,
						path: '/plug',
						navItem: '插件',
						iconClass: 'chajianku-chajianku',
						havesub: true,
						child: [
							{
								code: 301,
								path: '/plug/drag',
								navItem: '拖拽排序',
								iconClass: 'tuozhuai1',
							},
						]
					},

				],
				breadcrumbList: [],
				dynamicTags: [],
				showlangSet: false
			}
		},
		created() {
			if (JSON.parse(sessionStorage.getItem("router"))) {
				this.dynamicTags = JSON.parse(sessionStorage.getItem("router")).tags
			} else {
				this.dynamicTags = []
			}
			
			this.navList.sort((a,b)=>{
				return a.code - b.code
			});
			this.navList.forEach((item)=>{
				if(item.child){
					item.child.sort((a,b)=>{
						return a.code - b.code
					})
				}
			})
		},
		methods: {
			itemHover() {
				this.showUserSet = true;
			},
			removeHover() {
				this.showUserSet = false;
			},
			changeLang() {
				this.showlangSet = true;
			},
			removechangeLang() {
				this.showlangSet = false;
			},
			handleClosetag(tag) {
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
				if (this.dynamicTags.length > 0) {
					this.$router.push(this.dynamicTags[this.dynamicTags.length - 1].path);
					this.routerStore.tags = this.dynamicTags;
				} else {
					this.$router.push('/home');
				}
			},
			closeTags() {
				this.dynamicTags = []
				this.routerStore.tags = [];
				this.$router.push('/home');
			},
			generateBreadcrumb() {
				const matched = this.$route.matched; // 获取当前路由信息
				// console.log(matched,"matched")
				const breadcrumbList = []; // 初始化面包屑导航数据
				matched.forEach(item => { // 遍历路由信息，生成面包屑导航数据
					const {
						meta,
						name,
						path
					} = item
					if (meta.breadcrumb) {
						breadcrumbList.push({
							meta,
							name,
							path
						})
					}
				})
				// 保存面包屑导航数据
				this.breadcrumbList = breadcrumbList;
			},
			routerTag(tag) {
				console.log(tag.path)
				this.$router.push(tag.path);
			},
			routerHomeTag() {
				this.$router.push('/home');
			},
			routeTagList() {
				const matched = this.$route.matched; // 获取当前路由信息
				console.log(matched,"matched")
				matched.forEach(item => { // 遍历路由信息，生成面包屑导航数据
					const {
						meta,
						name,
						path
					} = item
					if (meta.tagList) {
						let repeat = this.dynamicTags.findIndex(col => col.meta.code === item.meta.code);
						if (repeat === -1) {
							this.dynamicTags.push({
								meta,
								name,
								path
							})

							this.routerStore.tags = this.dynamicTags;
						}
					}
				})
			},
			togglePageStyle() {
				// this.$http.get("/services/getData", { id:'123',token:'ddd' }).then({

				// })
				if (this.isCollapse) {
					this.isCollapse = false;
				} else {
					this.isCollapse = true;
				}
			},
			togglefullscreen() {
				if (!document.fullscreenElement) {
					this.enterFullScreen();
				} else {
					this.exitFullScreen();
				}
			},
			enterFullScreen() {
				let element = document.documentElement;
				if (element.requestFullscreen) {
					element.requestFullscreen();
				} else if (element.mozRequestFullScreen) {
					/* Firefox */
					element.mozRequestFullScreen();
				} else if (element.webkitRequestFullscreen) {
					/* Chrome, Safari & Opera */
					element.webkitRequestFullscreen();
				} else if (element.msRequestFullscreen) {
					/* IE/Edge */
					element.msRequestFullscreen();
				}
			},
			exitFullScreen() {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					/* Firefox */
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) {
					/* Chrome, Safari and Opera */
					document.webkitExitFullscreen();
				} else if (document.msExitFullscreen) {
					/* IE/Edge */
					document.msExitFullscreen();
				}
			}
		},
		computed: {

		},
		mounted() {
			this.generateBreadcrumb()
		},
		watch: {
			$route() {
				this.generateBreadcrumb();
				this.routeTagList()
			}
		}
	}
</script>

<style scoped="scoped">
	.navBar {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 256px;
		background: #001529;
		padding: 20px 0;
		transition: width 0.3s ease-in-out;
	}

	.navBar i {
		color: #fff;
		margin-right: 12px;
		font-size: 16px;
	}

	ul>li {
		text-align: center;
	}

	.contentRight {
		background: #f5f7f9;
		margin-left: 256px;
		transition: 0.3s ease-in-out;
	}

	/deep/ .el-menu {
		border-right: 0;
	}

	.pagehead {
		height: 50px;
		width: 100%;
		background: #fff;
		padding: 0 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: stretch;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.wxbreadcumb {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	/deep/ .el-breadcrumb {
		line-height: 0;
	}

	.userSettingContent {
		position: absolute;
		right: 20px;
		top: 70px;
		background: #fff;
		width: 100px;
		height: 60px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
	}

	.userSettinglang {
		position: absolute;
		right: 0px;
		top: 80px;
		background: #fff;
		width: 100px;
		height: 90px;
		box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
	}

	.userSettinglang>div {
		text-align: center;
		height: 30px;
		line-height: 30px;
		color: #515a6e;
		font-size: 12px;
	}

	.userSettingContent>div {
		text-align: center;
		height: 30px;
		line-height: 30px;
		color: #515a6e;
		font-size: 12px;
	}

	.userSetting {
		cursor: pointer;
		padding-right: 20px;
		height: 80px;
		line-height: 80px;
	}

	.notictips {
		position: absolute;
		top: -8px;
		right: -14px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		background: red;
		border-radius: 10px;
		display: inline-block;
		font-size: 12px;
		color: #fff;
		text-align: center;
		padding: 2px;
	}

	.disrelative {
		position: relative;
	}

	.userSetItem-enter-active {
		transition: all 0.1s ease-in;
	}

	.userSetItem-leave-active {
		transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
	}

	.userSetItem-enter-from,
	.userSetItem-leave-to {
		transform: translateY(20px);
		opacity: 0;
	}

	.routerTag {
		background: #ffffff;
		height: 38px;
		line-height: 36px;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		box-shadow: 0px 1px 2px 0px #eee;
	}

	/deep/ .el-tag {
		height: 28px;
		cursor: pointer;
		margin: 0 5px;
		color: #9E9E9E;
		font-size: 14px;
	}

	/deep/ .el-breadcrumb__item {
		float: none;
	}

	/deep/ .el-breadcrumb__inner>i {
		vertical-align: middle;
		font-size: 14px;
	}

	.activeTag {
		color: #03A9F4;
		border-color: #03A9F4 !important;
	}

	.activeTag .huiyuan {
		width: 10px;
		height: 10px;
		background: #03A9F4;
		border-radius: 50%;
		display: inline-block;
	}

	.huiyuan {
		width: 10px;
		height: 10px;
		background: #ccc;
		border-radius: 50%;
		display: inline-block;
	}

	.wxtoggleIcon {
		cursor: pointer;
		margin-right: 20px;
	}

	.collapsed {
		transform: rotateZ(90deg);
		transition: transform .2s ease;
	}

	.collapsNav {
		width: 64px;
		transition: 0.3s ease-in-out;
	}

	.collapscontentRight {
		margin-left: 64px;
		transition: 0.3s ease-in-out;
	}

	.logoimg {
		width: 150px;
		transition: 1s ease-in-out;
	}

	.collaoselogo {
		width: 30px;
		transition: 1s ease-in-out;
	}

	.utils {
		width: 40px;
		position: absolute;
		right: 100px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.changlangtit {
		font-size: 12px;
		color: #2d8cf0;
	}

	.langSetting {
		height: 80px;
		line-height: 80px;
	}

	.togglefullscreen {
		height: 80px;
		line-height: 84px;
	}

	/deep/ .el-tag__close {
		color: unset;
	}

	/deep/.el-tag.el-tag--primary.is-hit {
		border-color: #d0d0d0;
	}

	.closeTags {
		float: right;
		margin-right: 6px;
		color: #9E9E9E;
		margin-top: 2px;
		cursor: pointer;
	}

	.routerCon {
		height: calc(100% - 100px);
		padding:10px;
		overflow-y: auto;
	}
</style>